<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Jxz">
    <script src="jquery-3.1.1.js"></script>
    <title>简易轮播图</title>
    <style>
        #outer {
            width: 520px;
            height: 280px;
            border: 1px solid red;
            margin: 100px auto;
            position: relative;
        }
        
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        li {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        
        .active {
            display: block;
        }
        
        span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #eee;
            z-index: 9999;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            position: relative;
            left: 20px;
            top: 250px;
        }
        
        .ac {
            background-color: #999;
        }
        
        section {
            width: 20px;
            height: 100px;
            line-height: 100px;
            background-color: #999;
            opacity: 0.8;
            text-align: center;
            cursor: pointer;
        }
        div{
            position: relative;
        }
        .left {
            position: absolute;
            left: 0px;
            top: 80px;
        }
        .right{
            position: absolute;
            right: 0px;
            top: 80px;
        }
    </style>
</head>

<body>
    <div id="outer">
        <ul>
            <li class="active"><img src="01.jpg" alt=""></li>
            <li><img src="02.jpg" alt=""></li>
            <li><img src="03.jpg" alt=""></li>
            <li><img src="04.jpg" alt=""></li>
            <li><img src="05.jpg" alt=""></li>
        </ul>
        <span class="ac">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <section class="left">
            <</section>
                <section class="right">></section>
    </div>

</body>

</html>
<script>
    $(function () {
        var times = null
        var index =0;
        // 添加计时器
        times = setInterval(auto, 1000);
        function auto() {
            index++;
            if (index >= $('#outer li').length) {
                index = 0;
            }
            $('#outer li').eq(index).show().siblings().hide();
            $('span').eq(index).css('background', '#999')
                .siblings().css('background', '#eee')
        }


        // 移进DIV清除计时器，移除计时器
        $('#outer').hover(function () {
            clearInterval(times)
        }, function () {
          
            times = setInterval(auto, 1000);
        })

        // 手动
        $('span').mouseover(function () {
            $(this).css('background', '#999')
            .siblings().css('background', '#eee')
            $('li').eq($(this).index()-1).show().siblings().hide()
              index=$(this).html()-2; 
        })

        // 点击按钮播放
        $('.left').on('click',function(){
            index--
            if(index<0){
                index=4
            }
            $('li').eq(index).show().siblings().hide();
             $('span').eq(index).css('background', '#999')
            .siblings().css('background', '#eee')
        })
        $('.right').on('click',function(){
            index++
            if(index>4){
                index=0
            }
            $('li').eq(index).show().siblings().hide();
             $('span').eq(index).css('background', '#999')
            .siblings().css('background', '#eee')
        })
    });

</script>